<template>
  <div class="feedback-component">
    <el-card shadow="hover" class="feedback-card">
      <h2>希望站意见反馈</h2>

      <!-- 表单 -->
      <el-form :model="feedbackForm" ref="feedbackFormRef" label-width="130px" :rules="rules">

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="feedbackForm.name" placeholder="请输入您的姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="contact">
              <el-input v-model="feedbackForm.contact" placeholder="请输入您的联系方式" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="反馈内容" prop="content">
          <el-input
              type="textarea"
              :rows="5"
              v-model="feedbackForm.content"
              placeholder="请详细描述您的问题或建议..."
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitFeedback">✅ 提交反馈</el-button>
          <el-button @click="resetForm">🔄 重置</el-button>
          <el-button v-if="loading" loading>提交中...</el-button>
        </el-form-item>
      </el-form>

      <!-- 成功提示 -->
      <transition name="fade">
        <p v-show="submitted" class="success-message">
          感谢您的反馈！我们将尽快处理。
        </p>
      </transition>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'FeedbackComponent',
  data() {
    return {
      feedbackForm: {
        name: '',
        contact: '',
        content: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '姓名长度在2到20个字符之间', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系方式（手机号/邮箱）', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写反馈内容', trigger: 'blur' },
          { min: 10, message: '反馈内容不少于10个字', trigger: 'blur' }
        ]
      },
      submitted: false,
      loading: false
    };
  },
  methods: {
    submitFeedback() {
      this.$refs.feedbackFormRef.validate(valid => {
        if (valid) {
          this.loading = true;

          // 使用你封装好的 $axios 实例发送 POST 请求
          this.$axios.post('/api/feedback', this.feedbackForm)
              .then(response => {
                console.log('后端响应:', response.data);
                this.submitted = true;
                this.loading = false;

                setTimeout(() => {
                  this.submitted = false;
                  this.resetForm();
                }, 3000);
              })
              .catch(error => {
                this.$message.error('提交失败，请稍后再试');
                console.error('请求错误:', error.response?.data || error.message);
                this.loading = false;
              });

        } else {
          this.$message.error('请检查表单内容');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.feedbackFormRef.resetFields();
    }
  }
};
</script>

<style scoped>
.feedback-component {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
}

.feedback-card {
  border-radius: 10px;
  padding: 30px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.el-form-item {
  margin-bottom: 20px;
}

.success-message {
  text-align: center;
  color: #67C23A;
  font-size: 16px;
  margin-top: 20px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>